<template>
  <div ref="echarsRef" :width="props.width" :height="props.height" style="display: flex; flex-direction: column; justify-content: space-between; align-items: center;width: 100%;height: 100%">
    <div style="width: 100%; height: 84%; padding:0px;">
      <img :src="homeImg" style="width: 100%; height: 100%"/>
    </div>
    <div style="width: 100%; height: 16%; padding:4px;display: flex; flex-direction: row; justify-content: center; align-items: center;">
      <div style="width: 24%; height: 100%; padding:2px 2% 2px 2%;" :class="getDataRoomCls(0)" @mouseenter="stopAutoPlay(0)" @mouseleave="startAutoPlay">
        <img :src="dataRoomImg" style="width: 100%; height: 100%"/>
      </div>
      <div style="width: 24%; height: 100%; padding:2px 2% 2px 2%;" :class="getDataRoomCls(1)" @mouseenter="stopAutoPlay(1)" @mouseleave="startAutoPlay">
        <img :src="networkRoomImg" style="width: 100%; height: 100%"/>
      </div>
      <div style="width: 24%; height: 100%; padding:2px 2% 2px 2%;" :class="getDataRoomCls(2)" @mouseenter="stopAutoPlay(2)" @mouseleave="startAutoPlay">
        <img :src="upsRoomImg" style="width: 100%; height: 100%"/>
      </div>
    </div>
    <!-- <div style="width: 100%; height: 10%;">
      <a-card hoverable class="scroll-panel">
        <a-card-meta>
          <template #title>
            信息 : {{curWarningInfo?.info}}
          </template>
          <template #description>
            <span style="color:#CCFF33;">来源 : {{ curWarningInfo?.source }}</span>
            <span style="float:right;">{{ curWarningInfo?.start.substr(11) }}</span>
          </template>
        </a-card-meta>
      </a-card>
    </div> -->
    <!-- <el-carousel class="carousel-machine-room" :width="props.width" :height="props.height" :arrow="'hover'"
                 :autoplay="true" :interval="10000" @change="doRoomPlay">
      <el-carousel-item :key="0" style="padding: 20px 20px 80px 20px">
        <img :src="dataRoomImg" style="width: 100%; height: 100%"/>
      </el-carousel-item>
      <el-carousel-item :key="1" style="padding: 20px 20px 80px 20px">
        <img :src="networkRoomImg" style="width: 100%; height: 100%"/>
      </el-carousel-item>
      <el-carousel-item :key="2" style="padding: 20px 20px 80px 20px">
        <img :src="upsRoomImg" style="width: 100%; height: 100%"/>
      </el-carousel-item>
    </el-carousel>

    <div class="room-label-cls">
      {{ curAirRoomName }}
    </div> -->
  </div>
</template>
<script setup lang="ts">
import {ref, Ref, reactive, watchEffect, computed, unref, onMounted,onUnmounted} from 'vue';
import type {CSSProperties} from 'vue';
import dataRoomImg from '/images/data-room.png';
import networkRoomImg from '/images/network-room.png';
import upsRoomImg from '/images/ups-room.png';
import homeImg from '/images/home.png';
import {defHttp} from "/@/utils/http/axios";
import dayjs from 'dayjs';

const props = defineProps({
  roomIndex: {type: Number, default: 0},
  width: {type: String, default: '100%'},
  height: {type: String, default: '100%'}
});


//暴露内部方法
const emits = defineEmits(['change']);

const getDataRoomCls = function(index) {
  if(index==props.roomIndex){
    return 'data-room-active';
  }
  return '';
};

let timer;
const ActiveRoomIndex = ref(0);
const startAutoPlay = ()=>{
  if (timer) {
    clearInterval(timer);
  }
  timer = setInterval(function () {
      ActiveRoomIndex.value = ActiveRoomIndex.value + 1;
      if(ActiveRoomIndex.value>2){
        ActiveRoomIndex.value = 0;
      }
      emits('change',ActiveRoomIndex.value);
    },15000);
};
const stopAutoPlay = (activeRoomIndex)=>{
  if (timer) {
    clearInterval(timer);
  }
  ActiveRoomIndex.value = activeRoomIndex;
  emits('change',ActiveRoomIndex.value);
};


const ROOM_NAMES = ['数据机房', '网络机房', 'UPS间'];

onMounted(() => {
  ActiveRoomIndex.value = props.roomIndex;
});

onUnmounted(()=>{
  if(timer){
    clearInterval(timer);
    timer = null;
  }
});

</script>
<style lang="less" scoped>

/**
.room-label-cls {
  position: absolute;
  top: 40px;
  height: 60px;
  width: 100%;
  color: #fff;
  display: flex;
  font-size: 2rem;
  font-weight: bolder;
  justify-content: center;
  align-items: center;
}
*/
.scroll-panel {
  border-radius: 5px;
  background: rgba(0, 60, 153, 0.2);
  color: transparent;
  border: 0;
  padding: 6px;
  .description-title {
    font-weight: bold;
    color: rgb(249, 2, 2);
    margin-right: 4px;
  }
}

.data-room-active {
  border-radius: 10px;
  border:1px dashed #0415ff;
  box-shadow: 4px 4px 10px rgba(255, 225, 255, 0.424);
  background-color: linear-gradient(90deg, rgba(0, 60, 153, 0.2) 0%, rgba(85, 149, 245, 0.1) 48.8525390625%, rgba(0, 60, 153, 0.2) 100%);
}

:deep(.ant-card-meta-description) {
  color: white !important;
}

:deep(.ant-card-meta-title) {
  color: white !important;
}

:deep(.ant-card-body) {
  padding: 6px 10px  !important;
}

/**
:deep(.el-carousel__indicators li button){
  height: 40px;
  width: 40px;
}
:deep(.el-carousel__indicators li:nth-child(1) button::after) {
  content: "数据";
  height: 40px;
  width: 40px;
}

:deep(.el-carousel__indicators li:nth-child(2) button::after) {
  content: "网络";
  height: 40px;
  width: 40px;
}

:deep(.el-carousel__indicators li:nth-child(3) button::after) {
  content: "UPS";
  height: 40px;
  width: 40px;
}
**/
</style>
